import {
  Layout, Menu, Breadcrumb, Icon, Select
} from 'antd';
import styles from './index.css';
import { connect } from 'dva';
import router from 'umi/router';

const { SubMenu } = Menu;
const { Header, Content, Sider } = Layout;

let groupMap = new Map();

function BasicLayout(props) {

  const {pathname} = props.location;
  let id = null;
  let openKeys = [];
  if(pathname === "/syslist/"){
    openKeys=["sub"];
  }else{
    id = pathname.substr(pathname.lastIndexOf('/')+1);
  }

  const changeEnv = (value) => {
    const { dispatch } = props;
    dispatch({
      type: 'global/setEnv',
      payload: value
    });
    dispatch({
      type: 'sys/fetchSysList',
      payload: {
        mode: value
      }
    });
  }

  const onHandleMenu = (item) => {
    router.push(item.key);
  };

  const { global: {group}, sys: { sysList } } = props;
  group.forEach(item => {
    groupMap.set(item.id, item.name);
  });

  let sysMap = {};
  sysList.forEach(item => {
    if(id && id == item.id){
      openKeys = [`group${item.sysgroup}`];
    }
    if(sysMap[item.sysgroup]){
      sysMap[item.sysgroup].subList.push(item);
    }else{
      sysMap[item.sysgroup] = {
        name: groupMap.get(item.sysgroup),
        id: item.sysgroup,
        subList: [item],
      };
    }
  });

  let sysArray = [];
  for(let key in sysMap){
    sysArray.push(sysMap[key]);
  }
  sysArray.sort((a,b) => a.sysgroup > b.sysgroup);

  return (
    <Layout>
      <Header className="header">
        <div className={styles.logo}>
          <h1>服务管理系统</h1>
          <div className={styles.env}>
            <span>环境：</span>
            <Select
              defaultValue={props.global.env}
              onChange={changeEnv}
              style={{width: 90}}>
              <Select.Option key="0">uat</Select.Option>
              <Select.Option key="1">版本机</Select.Option>
              <Select.Option key="2">准生产</Select.Option>
            </Select>
          </div>
        </div>
      </Header>
      <Layout>
        <Sider width={200} style={{ background: '#fff' }}>
          <Menu
            mode="inline"
            defaultSelectedKeys={[pathname]}
            defaultOpenKeys={openKeys}
            style={{ height: '100%', borderRight: 0 }}
            onClick={onHandleMenu}
          >
            <SubMenu key="sub" title={<span><Icon type="desktop" />系统管理</span>}>
              <Menu.Item key="/syslist/">系统列表</Menu.Item>
            </SubMenu>
            { sysArray.map(item =>
              <SubMenu key={'group'+item.id} title={<span><Icon type="hdd" />{item.name}</span>}>
                { item.subList.map(subItem => <Menu.Item key={"/syslist/"+subItem.id}>{subItem.name}</Menu.Item>) }
              </SubMenu>
            )}
          </Menu>
        </Sider>
        <Layout style={{ padding: '0 24px 24px' }}>
          <Content style={{
            background: '#fff', padding: 24, margin: 0, minHeight: 280,
          }}
          >
            { props.children }
          </Content>
        </Layout>
      </Layout>
    </Layout>
  );
}

export default connect(({global, sys}) => ({global, sys}))(BasicLayout);
